<template>
  <div class="loginPage">
    <img class="img" src="../../assets/images/body-bg-2.png" alt="" >
    <!--表单区域  -->
    <div class="login-box">
      <!-- 标题栏 -->
      <div class="top">
        <div class="left">
          <div class="logo">
            <img src="../../assets/images/M.png" alt="" class="wh100">
          </div>
          <div>用户登录</div>
        </div>
        <div class="right">
          <img src="../../assets/images/Engish.png" alt="" class="wh100">
        </div>
      </div>
      <!-- 中部 -->
      <div class="mid">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" class="demo-ruleForm">
          <el-form-item  prop="username">
            <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid">demo</el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" suffix-icon="el-icon-view" type="password">
              123456
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 底部 -->
      <div class="bom">
        <div class="txt">仅用于IT培训教学使用，为保障您的个人信息安全请勿向平台录入任何个人敏感信息（如手机号、身份证号等）</div>
        <el-button type="primary" style="width:100%" @click="handleLogin">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from '@/api/user'
import {setToken} from '@/utils/auth'
export default {
  name: 'Login',
  data() {
    return{
      loginForm: {
        username: 'demo', // 默认账号
        password: '43ac95dea7dbe404ee36907dbf82805c62b5b3150272d775fc7bcfe43c302260', // 默认密码
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
    // 登录
    handleLogin() {
      // 表单预校验
      this.$refs.loginForm.validate(async(valid)=> { // 添加 async 
        if(valid) {
          // 校验通过
          // 调登录接口
          // const res = await login(this.loginForm)
          // 触发登录接口actio函数
          await this.$store.dispatch('user/fetchLogin', this.loginForm)
          // console.log('登录完成了');
          // console.log('登录',res);
          // const token = res.token
          // // 把token存入本地
          // setToken(token)
          //跳转带主页
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .loginPage {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('../../assets/images/body-bg-1.jpg');
    background-size: 100% 100%;
    .img {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .login-box {
      position: absolute;
      top: 50%;
      left: 20%;
      width: 520px;
      height: 355px;
      margin: -200px 0 0 0;
      padding: 35px 35px 15px 35px;
      background-color: #f5f5f5;
      .top {
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          font-size: 20px;
          .logo {
            width: 35px;
            height: 26px;
            margin-right: 10px;
          }
        }
        .right {
          width: 18px;
          height: 18px;
          border: 1px solid red;
        }
      }
      .mid {
        margin: 20px 0;
      }
      .bom {
        .txt {
          color: red;
        }
      }
    }
  }
</style>